<template>
  <div class="login-container">
    <el-form class="login-form" ref="login" :model="loginForm" :rules="loginRules">
      <!-- title -->
      <div class="title-container">
        <h3 class="title" v-if="status == false">注册</h3>
        <h3 class="title" v-else>用户登录</h3>
      </div>

      <!-- 用户名 -->
      <el-form-item prop="username">
        <span class="svg-container">
          <svg-icon icon="user"></svg-icon>
        </span>
        <el-input
          v-model="loginForm.username"
          type="text"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>

      <!--密码 -->
      <el-form-item prop="password">
        <span class="svg-container">
          <svg-icon icon="password"></svg-icon>
        </span>
        <el-input
          :type="passwordType"
          v-model="loginForm.password"
          placeholder="请输入密码"
        ></el-input>
        <span class="showPwd">
          <svg-icon :icon="passwordType == 'password' ? 'eye' : 'eye-open'" @click.native="onChangePwdType"></svg-icon>
        </span>
      </el-form-item>
      <!-- 确认密码 -->
       <el-form-item prop="repassword" v-if="status == false">
        <span class="svg-container">
          <svg-icon icon="password"></svg-icon>
        </span>
        <el-input
          :type="passwordTypes"
          v-model="loginForm.repassword"
          placeholder="请输入确认密码"
        ></el-input>
        <span class="showPwd">
          <svg-icon :icon="passwordTypes == 'password' ? 'eye' : 'eye-open'" @click.native="onChangePwdTypes"></svg-icon>
        </span>
      </el-form-item>

      <!-- button -->
      <el-form-item>
        <el-button type="primary" style="width: 100%" @click="handleLogin" v-if="status == true">登录</el-button>
        <el-button type="primary" style="width: 100%" v-else @click="handReg">注册</el-button>
      </el-form-item>

      <el-form-item>
        <el-button class="ce" style="width: 100%" v-if="status == true" @click="changOn" >切换为注册</el-button>
        <el-button class="ce1" style="width: 100%" v-else @click="changOn" >切换为登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import userApi from "../api/user.js"
export default {
  name: "login",
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
        repassword:""
      },
      loginRules: {
        username: [{ required: true, message: "username is required", trigger: "blur" }],
        password: [{ required: true, message: "password is required", trigger: "blur" }],
        repassword:[{required: true, message: "password is required", trigger: "blur" }]
      },
      passwordType : "password",
      passwordTypes : "password",
      status:true
    };
  },
  methods : {
    //密码的明文和暗文
    onChangePwdType(){
      this.passwordType = this.passwordType == "password" ? "text" : "password"
    },
    //确认密码的明文和暗文
      onChangePwdTypes(){
      this.passwordTypes = this.passwordTypes == "password" ? "text" : "password"
    },
    //切换登录和注册
    changOn(){
      this.status = !this.status
      this.$refs["login"].resetFields();
    },
    //登录
    handleLogin(){
      this.$refs["login"].validate( (valid) => {
        if(valid){
          this.$store.dispatch("loginwell",this.loginForm).then(res => {
            // console.log(res);
            if(res.status == 200){
                this.$router.push('/')
            }
          })
        }
      })
    },
    //注册
    handReg(){
        this.$refs["login"].validate(async (valid) => {
        if(valid){
          if(this.loginForm.password != this.loginForm.repassword){
            alert('请确认密码')
            return
          }
          console.log("注册");
          this.$store.dispatch("getReg",this.loginForm).then(res => {
            console.log(res);
            if(res.status == 200){
              this.status = !this.status
            }
           
          })
        }
      })
    }
    
  },
  components: {},
};
</script>

<style scoped lang="scss">
/*背景的颜色*/
$bg: #2d3a4b;
/*输入框图标的颜色*/
$dark_gray: #889aa4;
/*输入框文字的颜色*/
$light_gray: #eee;
/*光标的颜色*/
$cursor: #fff;
.ce {
  background: $cursor;
  color: skyblue;
}
.ce1 {
  color: $bg;
}

.bottom_title {
  width: 520px;
  margin: 0 auto;
  color: $cursor;
  font-size: 16px;
  p {
    line-height: 28px;
    margin-bottom: 10px;
  }
}

.login-container {
  width: 100%;
  min-height: 100%;
  background-color: $bg;
  overflow: hidden;

  .login-form {
    width: 520px;
    max-width: 100%;
    margin: 0 auto;
    padding: 160px 35px 0;
    overflow: hidden;

    /*修改ui框架样式不生效时,可以使用样式穿透  scss : ::v-deep*/
    ::v-deep .el-form-item {
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 5px;
      background: rgba(0, 0, 0, 0.1);
      color: #454545;

      .el-input {
        display: inline-block;
        height: 47px;
        width: 85%;
        input {
          background: transparent;
          outline: none;
          border: 0;
          -webkit-appearance: none;
          border-radius: 0px;
          padding: 12px 5px 12px 15px;
          color: $light_gray;
          height: 47px;
          caret-color: $cursor; /*设置光标的颜色*/
        }
      }
    }

    .svg-container {
      padding: 6px 5px 6px 15px;
      color: $dark_gray;
      vertical-align: middle;
      display: inline-block;
    }

    .title-container {
      position: relative;

      .title {
        margin: 0 auto 40px auto;
        font-size: 26px;
        color: $light_gray;
        text-align: center;
        font-weight: bold;
      }
    }
  }

  .showPwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
}
</style>
